## 什么是 BFC

MDN 定义：一个块格式化上下文（block formatting context） 是 Web 页面的可视化 CSS 渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。

BFC 就是一个隔离的独立容器，容器内的子元素不会影响外部的元素。

## BFC 有什么用

1、BFC 可以解决(清除浮动) 子元素浮动导致父元素高度塌陷问题。

演示正常情况： 父元素的高度由内容撑高
<div style={{ width: "300px", border: "1px solid red" }}>
  <div style={{ width: "100px", border: "1px solid green" }}>子元素</div>
</div>
<br />
<br />

演示子元素浮动：子元素浮动脱离文档流，父元素高度塌陷
<div style={{ height: "30px" }}>
  <div style={{ width: "300px", border: "1px solid red" }}>
    <div style={{ width: "100px", float: "left", border: "1px solid green" }}>
      子元素
    </div>
  </div>
</div>
<br />
演示添加BFC：即可清除浮动
<br />
<div style={{ width: "300px", border: "1px solid red", overflow: 'hidden' }}>
  <div style={{ width: "100px", float: "left", border: "1px solid green" }}>
    子元素
  </div>
</div>
<br />

[常见清除的几种方法](http://www.baidu.com)  

2、BFC 可以解决两个盒子之间的垂直 margin 重叠问题。 在通过 overflow:hidden
设置为独立的渲染区块（BFC）,这样 div 就不会影响外面的元素了。

```html
<div style="overflow: hidden">
  <div id="div1">
    width:180px <br />
    height: 100px <br />
    margin-bottom: 40px
  </div>
</div>

<div id="div2">
  width:170px <br />
  height: 100px <br />
  margin-top: 10px
</div>
```

3、不被浮动元素覆盖  
4、防止文字环绕

三、BFC 特性   
- 内部的 Box 会在垂直方向上一个接一个的放置。   
- 垂直方向上的距离由 margin 决定  
- bfc 的区域不会与 float 的元素区域重叠。 4.计算 bfc 的高度时，浮动元素也参与计算  
- bfc 就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。  

## 触发条件

- 浮动元素 (元素的 float 不是 none)
- 绝对定位元素 (元素具有 position 为 absolute 或 fixed)
- 内联块 (元素具有 display: inline-block)
- 表格单元格 (元素具有 display: table-cell，HTML 表格单元格默认属性)
- 表格标题 (元素具有 display: table-caption, HTML 表格标题默认属性)
- 具有 overflow 且值不是 visible 的块元素，
- display: flow-root （推荐使用）
- overflow 值不为 visible、clip 的块元素
- contain 值为 layout、content 或 paint 的元素
- 弹性元素（display 值为 flex 或 inline-flex 元素的直接子元素），如果它们本身既不是 flex、grid 也不是 table 容器
- 网格元素（display 值为 grid 或 inline-grid 元素的直接子元素），如果它们本身既不是 flex、grid 也不是 table 容器
- 多列容器（column-count 或 column-width 值不为 auto，包括 column-count 为 1）
- column-span: all 应当总是会创建一个新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一个多列容器中。
- ……
 
## 总结 
:::tip 
BFC 指的是块级格式化上下文，它是 CSS 中的一种渲染机制。当一个元素拥有 BFC 时，它的布局会完全独立于其他元素，BFC 元素内部的子元素不会影响外部元素的布局。BFC 元素可以防止 margin 重叠，可以清除浮动，可以实现自适应两栏布局等。
:::
